<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<meta name="description" content="">
	<meta name="author" content="">
	<title>班级说说--登陆</title>

	<!-- Bootstrap core CSS -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<style>
		body {
			padding-top: 10px;
		}
		#err{
			display: none;
		}
	</style>
</head>

<body>
		<% include header.ejs %>
	<div class="container jumbotron">
		<h3>欢迎登陆</h3>
		<form>
			<div class="form-group">
				<label for="exampleInputEmail1">用户名</label>
				<input type="text" class="form-control" id="username" placeholder="可以是中文，但是不能重复">
			</div>
			<div class="form-group">
				<label for="exampleInputPassword1">密码</label>
				<input type="password" class="form-control" id="password" placeholder="密码，至少6位">
			</div>
			<button type="button" class="btn btn-default" id="login">登陆</button>
		</form>
	</div>
	<div class="alert alert-danger" role="alert" id="err"></div>
	<!-- Bootstrap core JavaScript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script>
		$('input').focus(()=>{
			$('#err').fadeOut();
		})
		$('#login').click(function (param) {
			$.post('/doLogin', {
				username: $('#username').val(),
				password: $('#password').val()
			}, function (req) {
				if (req == 'success') {
					alert('登陆成功，将回到首页');
					location.href='/';
				} else if (req == -3) {
					$('#err').fadeIn();
					$('#err').html('网络错误，请稍后再试！')
				} else if (req == -1) {
					$('#err').fadeIn();
					$('#err').html('用户名不存在')
				}else if (req == -2) {
					$('#err').fadeIn();
					$('#err').html('密码错误')
				}
			})
		})
	</script>
</body>

</html>